<!-- 电影 -->

<template>
    <div style="width: 95%;margin: 0 auto;">
        <div class="teleplay-header">
            <a-card hoverable title="电影">
                <div class="teleplay-header-des">
                    <div>十年前你笑着看，十年后发现当初的笑点都是泪点，笑中带泪，无厘头中见人生</div>
                    <div style="margin-top: 2px;">
                        曾经有一份真诚的爱情摆在我面前，我没有珍惜，等到失去的时候才追悔莫及，人世间最痛苦的事情莫过于此。如果上天能够给我一个重新来过的机会，我会对那个女孩子说三个字：‘我爱你’。如果非要给这份爱加上一个期限，我希望是，一万年。
                        做人如果没有梦想，跟咸鱼有什么分别。
                    </div>
                    <div style="margin-top: 2px;font-style: italic;font-weight: bold;color:#03a9f4;">星爷的经典传奇永远不会随时间而泯灭!
                    </div>
                </div>
                <a-space wrap>
                    <a-tag checkable style="margin-right: 10px;" v-for="(year, index) of totalYears" :key="index"
                        :color="getTagColor()" @click="goAnchor('anchor-' + year)">
                        {{ year }}年
                    </a-tag>
                </a-space>
            </a-card>
        </div>


        <div class="teleplay-main">
            <a-timeline labelPosition="relative">
                <a-timeline-item :label="item.year+'年'" :name="'anchor-'+item.year" :id="'anchor-'+item.year"
                    v-for="item in movieList">
                    <a-card class="timeline-list-card" hoverable>
                        <template #title>
                            <span style="color:#ff9800;">{{annualReviewStr(item.year)}}</span>
                        </template>
                        <div class="timeline-list-card-box">
                            <!-- 循环渲染出每个电影信息 -->
                            <template v-for="movie in item.list">
                                <a-row class="timeline-list-card-item">
                                    <!-- 视频信息 -->
                                    <div class="video-info">
                                        <!-- <img :src="movie.img" /> -->
                                        <img v-lazy="movie.img" />
                                        <div class="video-info-box">
                                            <div>
                                                <!-- <span>名称：</span> -->
                                                <h3 class="video-info-title">{{movie.name}}</h3>
                                            </div>
                                            <div>
                                                <span>类型：</span>{{movie.category}}<br />
                                                <span>地区：</span>{{movie.region}}<br />
                                                <span>年份：</span>{{movie.year}}年<br />
                                                <span>导演：</span>{{movie.director}}<br />
                                                <!-- <span>状态：</span>更新至221集 <br /> -->
                                                <!-- <span>语言：</span>国语 -->
                                            </div>
                                            <div>
                                                <span>主演：</span>
                                                {{movie.actors}}
                                            </div>
                                            <!-- 简介 -->
                                            <div class="video-info-introduction">
                                                <span>简介：</span>
                                                {{movie.intro}}
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 点评 -->
                                    <div class="video-comment">
                                        <span>点评：</span>
                                        <span class="video-comment-txt">
                                            {{movie.comment}}
                                        </span>
                                    </div>
                                    <!-- 视频链接 -->
                                    <div class="video-link">
                                        <a-tag class="video-origin-link-tag" color="red">
                                            <a :href="movie.url" target="_blank">源站观看</a>
                                        </a-tag>

                                        <a-tag class="video-links-tag" color="purple" :checked="false"
                                            @click="getVideoLinks(movie.id)" style="margin-left: 20px;">显示链接</a-tag>
                                        <div id="video-links" class="video-links" style="margin: 10px 0;"
                                            v-if="videoLinksVisible">
                                            <!-- <a-space wrap id="video-links-alist">
                                                <a-link style="font-size: 12px;" v-for="link in videoLinkList"
                                                    @click="getRealLink(link.url)">
                                                    {{link.name}}
                                                </a-link>
                                            </a-space> -->
                                            <a-space wrap id="video-links-alist">
                                                <a-link style="font-size: 12px;"
                                                    v-for="link in videoLinkListMap[movie.id]"
                                                    @click="getRealLink(link.url)">
                                                    {{link.name}}
                                                </a-link>
                                            </a-space>
                                        </div>
                                    </div>
                                </a-row>

                                <a-divider />
                            </template>

                        </div>
                    </a-card>
                </a-timeline-item>

            </a-timeline>
        </div>

    </div>

    <!-- 弹出视频播放窗口 -->
    <a-modal v-model:visible="playerIsShow" :width="1200" :hide-cancel="true" :closable="false" :esc-to-close="false"
        :mask-closable="false" okText="退出" @close="playerHandleClose"
        :body-style="{'height': '600px', 'width': '100%','padding': '0'}">
        <template #footer>
            <a-button type="primary" size="mini" @click="playerHandleClose">退出</a-button>
        </template>

        <iframe :src="videoRealPlaylink" style="height: 98.5%;width: 100%;z-index: 2000;" frameborder="0" border="0"
            marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"
            mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen"
            oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen" security="restricted"
            sandbox="allow-same-origin allow-forms allow-scripts"></iframe>
    </a-modal>
</template>

<script>
import { ref, onMounted, computed } from 'vue';
import { Message } from '@arco-design/web-vue';
import { getAll, getList, getYears, getMovieLinks } from '../api/movie';
import { getRealPlaylink } from '../api/playlink';
import { getAnnualReviewList } from '../api/annualreview';

export default {
    setup() {
        const tagColors = [
            '#f53f3f',
            '#7816ff',
            '#00b42a',
            '#165dff',
            '#ff7d00',
            '#eb0aa4',
            '#7bc616',
            '#b71de8',
            '#0fc6c2',
            '#ffb400',
            '#168cff',
            '#ff5722',
        ];
        const totalYears = ref([]);
        const movieList = ref([]);    // 电影列表
        const annualReviewList = ref([]);    // 电影年度点评列表
        const videoLinkList = ref([]);    // 视频播放链接列表
        const videoLinkListMap = ref(new Map());    // 视频播放链接列表
        const videoLinksVisible = ref(false);    // 视频链接是否显示
        const playerIsShow = ref(false);  // 视频播放弹窗是否显示
        const videoRealPlaylink = ref('');    // 视频真实播放地址

        const totalPage = ref(0); // 总页数
        const pageNum = ref(1); // 当前页
        const pageSize = ref(8); // 每页大小

        // 获取年份标签颜色值
        const getTagColor = () => {
            return tagColors[Math.floor((Math.random() * (tagColors.length + 1)))];
        };
        // 锚点跳转
        const goAnchor = (e) => {
            var id = "#" + e;
            let el = document.querySelector(id);
            if (el) {
                el.scrollIntoView({
                    behavior: "smooth",
                });
            }
        }


        // 获取电影列表
        const getAllList = () => {
            // 电影列表数据
            getAll().then(res => {
                if (res.code != 200) {
                    if (res.code != 200) {
                        Message.error("获取电影列表失败");
                        return;
                    }
                }
                let movies = res.data;
                // 排序，年份大的朝前
                movieList.value = movies.sort((a, b) => b.year - a.year);
            }).catch(err => console.log(err));
        }

        // 分页获取电影列表数据
        const getDataList = () => {
            // 分页获取电影列表数据
            getList(pageSize.value, pageNum.value).then(res => {
                if (res.code != 200) {
                    if (res.code != 200) {
                        Message.error("获取电影列表失败");
                        return;
                    }
                }

                // 总页数
                totalPage.value = res.totalPage;
                let temList = movieList.value;
                let list = temList.concat(res.data);
                // 合并数组,排序(年份大的朝前)
                movieList.value = list.sort((a, b) => b.year - a.year);
            }).catch(err => console.log(err));
        }

        // 获取电影所有年份
        const getTotalYears = () => {
            // 获取年份
            getYears().then(res => {
                if (res.code != 200) {
                    Message.error("获取Years失败");
                    return;
                }
                totalYears.value = res.data;
            });
        }

        // 获取电影年度点评列表
        const getAnnualReviews = () => {
            getAnnualReviewList(2).then(res => {
                if (res.code != 200) {
                    Message.error("获取年度点评数据失败");
                    return;
                }
                annualReviewList.value = res.data;
            }).catch(err => console.log(err));
        }


        let oldVideoId = '';
        // 获取并显示视频连接
        const getVideoLinks = (movieId) => {
            if (videoLinksVisible.value == true) {   // 可视
                videoLinksVisible.value = false;    // 置为隐藏
                return;
            }
            // if (videoLinkList.value.length > 0 && movieId == oldVideoId) {   // 已经有数据
            //     videoLinksVisible.value = true;
            //     return;
            // }
            // console.log(videoLinkListMap.value[movieId]);
            if (videoLinkListMap.value[movieId] && movieId == oldVideoId) {   // 已经有数据
                videoLinksVisible.value = true;
                return;
            }
            // 获取视频集数链接
            getMovieLinks(movieId).then(res => {
                if (res.code != 200) {
                    Message.error("获取播放链接失败");
                    return;
                }
                // videoLinkList.value = res.data;

                videoLinkListMap.value[movieId] = res.data;
                // 显示
                videoLinksVisible.value = true;
            }).catch(err => { console.log(err); });
        };

        // 获取真实播放地址
        const getRealLink = (url) => {
            getRealPlaylink("movie", url).then(res => {
                if (res.code != 200 || res.data == '') {
                    Message.error("获取地址失败");
                    return;
                }
                // window.open(res.data);
                videoRealPlaylink.value = res.data;
                playerIsShow.value = true;

            }).catch(err => { console.log(err) });
        };

        // 退出视频播放
        const playerHandleClose = () => {
            videoRealPlaylink.value = '';
            playerIsShow.value = false;
        }

        // 计算属性，获取每一年度的点评语
        const annualReviewStr = computed(() => (y) => {
            var obj = annualReviewList.value.find(a => a.year == y);
            if (obj) {
                return obj.comment;
            } else {
                return '暂无';
            }
        });


        // 滚动到底部，再加载的处理事件
        const lazyLoading = () => {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const clientHeight = document.documentElement.clientHeight;
            const scrollHeight = document.documentElement.scrollHeight;

            if (scrollTop + clientHeight >= scrollHeight) {
                // 滚动到底部，逻辑代码
                pageNum.value++;
                if (pageNum.value > totalPage.value) { return; }


                getDataList();
            }
        };


        // 挂载完毕事件
        onMounted(() => {
            getTotalYears();
            // getAllList();
            getDataList();
            getAnnualReviews();

            // 滚动到底部，再加载的处理事件
            window.addEventListener('scroll', lazyLoading);
        });



        return {
            totalYears,
            movieList,
            videoLinkList,
            videoLinkListMap,
            videoLinksVisible,
            playerIsShow,
            videoRealPlaylink,
            annualReviewStr,

            getTagColor,
            goAnchor,
            getVideoLinks,
            getRealLink,
            playerHandleClose,
        }
    },
}
</script>




<style scoped>
.teleplay-header {
    width: 100%;
    margin: 10px auto 0 auto;
}

.teleplay-header .arco-card-body {
    padding-top: 0 !important;
}

.teleplay-header-des {
    margin: 10px 0;
    font-size: 12px;
    margin: 0px 0px 10px !important;
    line-height: 16px;
}

.teleplay-main {
    margin-top: 30px;
    padding: 10px;
}

.timeline-list-card {
    width: 95%;
    margin: 15px 0;
}

.timeline-list-card .arco-card-header {
    background-color: aliceblue !important;
}

.timeline-list-card-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.timeline-list-card-item {
    display: inline-flex;
    /* height: 250px; */
    align-items: center;
}

.timeline-list-card-item img {
    width: 160px;
    height: 200px;
    border-radius: 2px;
}

.video-info {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.video-info-box {
    margin: 0 15px;
    flex: 1;
    line-height: 16px;
    font-size: 12px;
}

.video-info-box span {
    color: #777;
}

.video-info-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
    font-weight: 600;
}

.video-info-introduction {
    max-height: 90px;
    overflow-y: auto;
}

.video-comment {
    width: 100%;
    margin-top: 10px;
}

.video-comment-txt {
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    color: #e6b406;
}

.video-links-tag:hover {
    cursor: pointer;
}

.video-origin-link-tag:hover {
    cursor: pointer;
}

.video-origin-link-tag a {
    text-decoration: none;
}

.video-link {
    width: 100%;
    margin-top: 10px;
}
</style>